<template>
	<view class="talks-container">
		<!-- 顶部导航栏 -->
		<view class="header" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="header-content">
				<view class="back-btn" @click="navigateBack">
					<uni-icons type="back" size="24" color="#ffffff"></uni-icons>
				</view>
				<view class="header-title">我的谈话</view>
			</view>
		</view>

		<!-- 谈话列表 -->
		<view class="talks-list">
			<view v-if="loading" class="loading">
				<uni-load-more status="loading" />
			</view>
			<view v-else-if="!talks || talks.length === 0" class="empty-tip">
				<image src="/static/images/empty.png" mode="aspectFit"></image>
				<text>暂无谈话记录</text>
			</view>
			<view v-else class="talk-cards">
				<view v-for="(item, index) in talks" :key="index" class="talk-card" @click="showTalkDetail(item)">
					<view class="card-left">
						<view class="talk-date">{{item.talkDate}}</view>
						<view class="talk-time">{{item.talkTime}}</view>
						<view class="talk-title">{{item.talkTitle}}</view>
						<view class="talk-place">
							<uni-icons type="location" size="14" color="#666"></uni-icons>
							<text>{{item.talkPlace}}</text>
						</view>
					</view>
					<view class="card-right">
						<view class="talk-summary">{{item.talkSummary}}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 谈话详情弹窗 -->
		<uni-popup ref="detailPopup" type="bottom" background-color="#fff">
			<view class="detail-popup">
				<view class="popup-header">
					<text class="popup-title">谈话详情</text>
					<view class="close-btn" @click="closeDetailPopup">
						<uni-icons type="close" size="24" color="#666"></uni-icons>
					</view>
				</view>
				<scroll-view scroll-y class="popup-content">
					<view class="detail-item">
						<text class="label">谈话主题</text>
						<text class="value">{{currentTalk.talkTitle}}</text>
					</view>
					<view class="detail-item">
						<text class="label">谈话时间</text>
						<text class="value">{{currentTalk.talkDate}} {{currentTalk.talkTime}}</text>
					</view>
					<view class="detail-item">
						<text class="label">谈话地点</text>
						<text class="value">{{currentTalk.talkPlace}}</text>
					</view>
					<view class="detail-item">
						<text class="label">谈话摘要</text>
						<text class="value summary">{{currentTalk.talkSummary}}</text>
					</view>
					<view class="detail-item" v-if="currentTalk.fileUrl">
						<text class="label">相关文件</text>
						<view class="file-link" @click="openFile(currentTalk.fileUrl)">
							<uni-icons type="paperclip" size="16" color="#1890ff"></uni-icons>
							<text>查看文件</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import {onLoad} from '@dcloudio/uni-app'
	import { getTalkList } from '../../common/js/api';
	import { navigateBack } from '@/common/js/common';
	
	const talks = ref([]);
	const userId = uni.getStorageSync('userId');
	const statusBarHeight = ref(0);
	const loading = ref(true);
	const detailPopup = ref(null);
	const currentTalk = ref({});
	
	onLoad(async() => {
		uni.showLoading({
			title: '加载中'
		});
		
		const resp = await getTalkList(userId);
		talks.value = resp.data.data;
		for (var i = 0;i < talks.value.length;++i) {
			talks.value[i].talkTime = talks.value[i].talkTime.substring(0,10);
		}
		
		// 获取状态栏高度
		const systemInfo = uni.getSystemInfoSync();
		statusBarHeight.value = systemInfo.statusBarHeight || 20;
		
		// 模拟数据加载
		setTimeout(() => {
			loading.value = false;
			uni.hideLoading();
		}, 500);
	});

	// 显示谈话详情
	const showTalkDetail = (talk) => {
		currentTalk.value = talk;
		detailPopup.value.open();
	}

	// 关闭详情弹窗
	const closeDetailPopup = () => {
		detailPopup.value.close();
	}

	// 打开文件
	const openFile = (url) => {
		console.log(url);
		// 根据文件类型选择打开方式
		if (url) {
			uni.downloadFile({
				url: url,
				success: (res) => {
					if (res.statusCode === 200) {
						uni.openDocument({
							filePath: res.tempFilePath,
							success: function() {
								console.log('打开文档成功');
							},
							fail: function() {
								uni.showToast({
									title: '打开文件失败',
									icon: 'none'
								});
							}
						});
					}
				},
				fail: function() {
					uni.showToast({
						title: '下载文件失败',
						icon: 'none'
					});
				}
			});
		}
	}
</script>

<style lang="scss" scoped>
	.talks-container {
		min-height: 100vh;
		background-color: #f5f7fa;
		position: relative;
		padding-bottom: 30rpx;
		
		.header {
			background-color: #ff7a45;
			height: 180rpx;
			width: 100%;
			position: relative;
			transition: all 0.3s ease;
			
			.header-content {
				position: relative;
				height: 100%;
				
				.back-btn {
					position: absolute;
					top: 60rpx;
					left: 20rpx;
					width: 80rpx;
					height: 80rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					z-index: 10;
					transition: all 0.2s ease;
					
					&:active {
						transform: scale(0.95);
						opacity: 0.8;
					}
				}
				
				.header-title {
					position: absolute;
					top: 60rpx;
					left: 0;
					width: 100%;
					text-align: center;
					font-size: 36rpx;
					font-weight: bold;
					color: #ffffff;
					transition: all 0.3s ease;
				}
			}
		}
		
		.talks-list {
			padding: 30rpx;
			
			.loading {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 40rpx;
				animation: fadeIn 0.3s ease;
			}
			
			.empty-tip {
				background: #ffffff;
				border-radius: 12rpx;
				padding: 60rpx 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
				animation: slideUp 0.3s ease;
				
				image {
					width: 160rpx;
					height: 160rpx;
					margin-bottom: 20rpx;
					animation: scaleIn 0.5s ease;
				}
				
				text {
					font-size: 28rpx;
					color: #999;
					animation: fadeIn 0.5s ease 0.2s both;
				}
			}
			
			.talk-cards {
				.talk-card {
					background: #ffffff;
					border-radius: 12rpx;
					padding: 30rpx;
					margin-bottom: 20rpx;
					display: flex;
					justify-content: space-between;
					box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
					transition: all 0.3s ease;
					animation: slideUp 0.3s ease;
					
					&:active {
						transform: scale(0.98);
						box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
					}
					
					.card-left {
						flex: 1;
						overflow: hidden;
						
						.talk-date {
							font-size: 24rpx;
							color: #666;
							margin-bottom: 10rpx;
							transition: all 0.3s ease;
						}
						
						.talk-time {
							font-size: 28rpx;
							color: #ff7a45;
							margin-bottom: 10rpx;
							font-weight: 500;
							transition: all 0.3s ease;
						}
						
						.talk-title {
							font-size: 32rpx;
							color: #333;
							font-weight: bold;
							margin-bottom: 10rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							transition: all 0.3s ease;
						}
						
						.talk-place {
							font-size: 24rpx;
							color: #666;
							display: flex;
							align-items: center;
							transition: all 0.3s ease;
							
							text {
								margin-left: 8rpx;
							}
						}
					}
					
					.card-right {
						display: flex;
						flex-direction: column;
						align-items: flex-end;
						justify-content: space-between;
						padding-left: 20rpx;
						
						.talk-summary {
							font-size: 26rpx;
							color: #666;
							line-height: 1.6;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 3;
							overflow: hidden;
							text-overflow: ellipsis;
							background: #f8f8f8;
							padding: 16rpx;
							border-radius: 8rpx;
							width: 220rpx;
							transition: all 0.3s ease;
						}
					}
				}
			}
		}
	}
	
	@keyframes fadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}
	
	@keyframes slideUp {
		from {
			opacity: 0;
			transform: translateY(20rpx);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
	
	@keyframes scaleIn {
		from {
			opacity: 0;
			transform: scale(0.8);
		}
		to {
			opacity: 1;
			transform: scale(1);
		}
	}

	.detail-popup {
		background-color: #fff;
		border-radius: 24rpx 24rpx 0 0;
		padding-bottom: env(safe-area-inset-bottom);
		
		.popup-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			border-bottom: 1rpx solid #eee;
			
			.popup-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}
			
			.close-btn {
				padding: 10rpx;
			}
		}
		
		.popup-content {
			max-height: 60vh;
			padding: 30rpx;
			
			.detail-item {
				margin-bottom: 30rpx;
				
				.label {
					font-size: 28rpx;
					color: #666;
					margin-bottom: 10rpx;
					display: block;
				}
				
				.value {
					font-size: 30rpx;
					color: #333;
					line-height: 1.5;
					white-space: pre-wrap;
					word-break: break-all;
				}
				
				.file-link {
					display: inline-flex;
					align-items: center;
					padding: 16rpx 24rpx;
					background: #e6f7ff;
					border-radius: 8rpx;
					
					text {
						color: #1890ff;
						margin-left: 8rpx;
						font-size: 28rpx;
					}
				}
			}
		}
	}
</style>
